<template>
  <div class="subject-right">
    <div class="subject-right-header">
      <div class="resourceTop">
        <div class="text">
          <p class="title007">老师信息</p>
          <p>
            <!-- <span>共&nbsp;{{ classNum }}&nbsp;个标签类别</span> -->
            <!-- <span>共&nbsp;{{ tableDatas.length }}&nbsp;个专业类别</span> -->
          </p>
        </div>
        <div class="nav-right">
          <el-button size="large" round @click="open" color="#d11431" style="color: #fff">
            添加老师
          </el-button>
        </div>
      </div>
    </div>
    <div class="subject-right-body">
      <div class="table">
        <el-table :data="tableDatas" height="74vh" style="width: 100%" empty-text="当前没有老师" @row-click="acs"
          :row-style="{ height: '80px' }">
          <el-table-column prop="userId" label="老师编号" align="center" />
          <el-table-column prop="nickName" label="老师" align="center" sortable />
          <el-table-column prop="directionName" label="所属专业" align="center" sortable />
          <el-table-column prop="id" label="管理" align="center">
            <template #default="scope">
              <el-tooltip content="修改老师信息" placement="left">
                <el-button type="info" size="mini" round @click="update(scope.row)" :icon="Edit" />
              </el-tooltip>
              <el-tooltip content="删除当前老师" placement="right">
                <el-button type="danger" size="mini" round @click="confirmDelete(scope.row.userId)" :icon="Delete" />
              </el-tooltip>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <el-dialog :title="isEdit ? '修改老师' : '创建老师'" v-model="dialogVisible" width="30%">
      <el-form :model="teacherForm" :rules="rules" ref="formRef" label-width="150px"
        style="max-width: 100%; margin: 0 auto;">
        <el-form-item label="账号/电话号码:" prop="userName">
          <el-input v-model="teacherForm.userName" style="width: 150px;" @input="onInputUserName" />
        </el-form-item>
        <el-form-item label="姓名:" prop="nickName">
          <el-input v-model="teacherForm.nickName" style="width: 150px;" @input="onInputNickName" />
        </el-form-item>
        <el-form-item label="所属专业:" prop="majorId">
          <el-select v-model="teacherForm.majorId"  placeholder="选择所属专业" style="width: 150px;">
            <el-option  v-for="item in directions" :key="item.directionId" :label="item.directionName"
              :value="item.directionId" />
          </el-select>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button style="font-size: 12px;height: 30px; width: 60px;" @click="quxiao">取消</el-button>
          <el-button style="font-size: 12px;height: 30px; width: 60px;" type="primary"
            @click="submitForm">确定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { Edit, Delete } from "@element-plus/icons-vue";
import { selectAllTeacherMajor, deleteTeacherMajorById, updateTeacherMajor, selectAllSchool, addTeacherMajor, selectAllByid } from "@/api/teacher/AddClass";
import { directionList } from '@/api/courseManager';

const classNum = ref(0);
const tableDatas = ref([]);
const isEdit = ref(false);
const dialogVisible = ref(false);
const teacherForm = ref({});
const formRef = ref(null);
const statusOptions = ref([
  { value: '0', label: '启用' },
  { value: '1', label: '禁用' }
]);
const userTypes = ref([
  { value: '0', label: '管理员' },
  { value: '1', label: '讲师' }
]);
const schools = ref([]);
const directions = ref([]);
const validateNoSpaces = (rule, value, callback) => {
  if (value && value.trim() === '') {
    callback(new Error('输入不能包含空格'));
  } else {
    callback();
  }
};
// 校验规则
const rules = {
  userName: [
    { required: true, message: '请输入账号', trigger: 'blur' },
    { validator: validateNoSpaces, trigger: 'blur' }
  ],
  nickName: [
    { required: true, message: '请输入姓名', trigger: 'blur' },
    { validator: validateNoSpaces, trigger: 'blur' }
  ],
  majorId: [
    { required: true, message: '请选择所属专业', trigger: 'change' },
  ]
};



const onInputUserName = (value) => {
  teacherForm.value.userName = value.replace(/\s+/g, '');
}

const onInputNickName = (value) => {
  teacherForm.value.nickName = value.replace(/\s+/g, '');
}

// 查询所有学校信息
const selectSchool = async () => {
  let res = await selectAllSchool();
  schools.value = res.data;
}
selectSchool();

// 查询所有专业名称
const selectDirection = async () => {
  let res = await directionList();
  directions.value = res.data;
}
selectDirection();

const getAllTeacherMajor = async () => {
  let res = await selectAllTeacherMajor();
  tableDatas.value = res.data;
};
getAllTeacherMajor();

const open = () => {
  isEdit.value = false;
  teacherForm.value = {
    userName: '',
    nickName: '',
    userPass: '',
    schoolId: '',
    userPhone: '',
    userType: '',
    userStatus: '',
    majorId: ''
  };
  dialogVisible.value = true;
  formRef.value.resetFields();
};

const update = async (row) => {
  isEdit.value = true;
  let xinxi = await selectAllByid(row.userId);
  teacherForm.value = xinxi.data;
  dialogVisible.value = true;
};

const submitForm = async () => {
  formRef.value.validate(async (valid) => {
    if (valid) {
      if (isEdit.value) {
        try {
          await updateTeacherMajor(teacherForm.value);
          ElMessage({
            type: "success",
            message: `修改成功`,
          });
        } catch (error) {
          console.log(error);
          ElMessage({
            type: "error",
            message: error.message,
          });
          return;
        }
      } else {
        try {
          teacherForm.value.userPass = '123456';
          teacherForm.value.userType = 1;
          teacherForm.value.userStatus = 0;
          teacherForm.value.userPhone = teacherForm.value.userName;
          teacherForm.value.schoolId = 1;
          teacherForm.value.userAvator = 'beijing.aliyuncs.com/854cf540531a491381b530419cc47d35.png';
          const res = await addTeacherMajor(teacherForm.value);
          ElMessage({
            type: "success",
            message: `添加成功`
          });
        } catch (error) {
          ElMessage({
            type: "error",
            message: error.message,
          });
          return;
        }
      }
      dialogVisible.value = false;
      teacherForm.value = {};
      getAllTeacherMajor();
      formRef.value.resetFields();
    }
  });
};

const quxiao = () => {
  dialogVisible.value = false;
  formRef.value.resetFields();
};

const confirmDelete = (userId) => {
  ElMessageBox.confirm("是否删除该老师", "删除老师", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  }).then(async () => {
    try {
      const aa = await deleteTeacherMajorById(userId);
      getAllTeacherMajor();
      ElMessage({
        type: "success",
        message: "删除成功",
      });
    } catch (error) {
      ElMessage({
        type: "error",
        message: error.message,
      });
    }
  });
};

const acs = (row) => {
  // console.log(row);
};
</script>

<style scoped lang="scss">
@import url(@/assets/font/iconfont.css);

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

a {
  text-decoration: none;
}

ul,
ol {
  list-style: none;
}

.resourceTop {
  width: 100%;
  height: 100px;
  background-color: white;
  border: 1px solid #f0f0f0;
  padding: 16px 60px;
}

.resourceTop .logo {
  width: 60px;
  height: 60px;
  background-color: #ff6b0f;
  border-radius: 50%;
  display: inline-block;
  justify-content: center;
  align-items: center;
}

.resourceTop .logo img {
  width: 60px;
  height: 60px;
  padding: 18px;
}

.resourceTop .text {
  width: 120px;
  height: 100%;
  margin-left: 20px;
  display: inline-block;
}

.resourceTop .text .title007 {
  font-size: 22px;
  font-weight: 500;
  color: rgba(0, 0, 0, 0.85);
  margin-bottom: 10px;
}

.resourceTop .text p span {
  color: rgba(0, 0, 0, 0.45);
}

.resourceTop .text p a {
  color: #f4523b;
}

.search {
  display: flex;
  float: right;
  border-radius: 2px;
  background-color: #fafafa;
  border: 1px solid #f0f0f0;
}

.sousuo {
  width: 40px;
  height: 40px;
  padding: 11px;
  background-color: #fff;
}

.resourceTop .search input {
  width: 320px;
  height: 40px;
  border: none;
  background-color: #fff;
}

.search input:focus {
  outline: none;
}

.search:hover {
  border: 1px solid #FF6B0F;
}

.nav-right {
  float: right;
  width: 95px;
  height: 100%;
  padding: 10px 0;
}

.subject-right-header {
  width: 100%;
}

.subject-right-body {
  background-color: #eeeeee;
  height: 78.5vh;
  width: 99.9%;
  padding: 24px 60px;
}

.table {
  height: 100px;
  width: 100%;
}

::v-deep .el-table tr:hover {
  cursor: pointer;
}

.el-form-item {
  margin-bottom: 20px;
}

.el-form-item__label {
  width: 100px;
}

.el-form-item__content {
  margin-left: 100px;
}
</style>